<template>
  <div class="items-panel">
    <h3 class="panel-title">掉落物品面板</h3>
    <div class="items-list" ref="itemsList">
      <div v-for="(item, index) in filteredItems" :key="index" class="item">
        <!-- 显示物品名称和数量 -->
        <span class="item-name">{{ item.displayName }}</span>
        <span class="item-value">{{ formatProfit(getItemValue(item)) }}</span>
        <img :src="require('@/../public/assets/huo.png')" alt="火" class="item-value-icon">
      </div>
      <div v-if="filteredItems.length === 0" class="empty-tip">
        暂无掉落物品
      </div>
    </div>
  </div>
</template>

<script>
import { dataService } from '../services/dataService'
export default {
  props: {
    filteredItems: Array
  },
  methods: {
    formatProfit(value) {
      if (typeof value !== 'number') return '0';

      // 转换为3位小数的字符串
      const fixed = value.toFixed(3);

      // 判断是否为整数（末尾是.000）
      if (fixed.endsWith('.000')) {
        // 去除小数部分，只保留整数
        return fixed.split('.')[0];
      } else {
        // 非整数则保留3位小数
        return fixed;
      }
    },
    // 计算物品总价值
    getItemValue(item) {
      // 关键修改：直接从 dataService.priceTable 获取最新价格
      // 优先使用物品ID匹配（更准确）， fallback 到名称
      const latestPrice = dataService.priceTable[item.id] || dataService.priceTable[item.name] || 0;
      // 用最新价格 × 数量，得到实时价值
      return latestPrice * item.count;
    },
    // 格式化时间显示
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      return `${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    }
  },
  // 监听价格表更新，强制重新计算（关键）
  created() {
    // 注册价格更新回调，确保价格变化后面板重新计算
    this.priceUpdateCallback = () => {
      this.$forceUpdate(); // 强制Vue重新渲染，更新显示
    };
    dataService.onPriceTableUpdated = this.priceUpdateCallback;
  },
  // 组件销毁时移除回调，避免内存泄漏
  beforeDestroy() {
    if (dataService.onPriceTableUpdated === this.priceUpdateCallback) {
      dataService.onPriceTableUpdated = null;
    }
  },
  mounted() {
    this.$nextTick(() => {
      const itemsList = this.$refs.itemsList;
      if (itemsList) {
        itemsList.style.scrollbarWidth = 'thin';
        itemsList.style.scrollbarColor = 'rgba(150, 150, 150, 0.3) transparent';
      }
    });
  }
};
</script>

<style scoped>
.items-panel {
  flex: 1;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  height: 100%;
}

.panel-title {
  padding: 10px 15px;
  margin: 0;
  background: #409EFF;
  color: white;
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
}

.items-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  min-height: 0;
}

/* 隐藏滚动条但保持滚动功能 */
.items-list::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}

.items-list {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: #f8f9fa;
  border-radius: 4px;
  border-left: 3px solid #409EFF;
  font-size: 12px;
}

.item-name {
  font-weight: bold;
  color: #333;
  flex: 1;
  /* 确保长名称不会溢出 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-value {
  font-weight: bold;
  color: #E6A23C;
  margin: 0 5px;
  min-width: 40px;
  text-align: right;
}

.item-value-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  margin-right: 8px;
}

.item-time {
  color: #666;
  font-size: 10px;
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
}

.empty-tip {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 20px;
}

/* 移除控制按钮相关样式 */
</style>